<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body class="main_body">
  <ul class="layui-nav">
    <li class="layui-nav-item"><a href="index.html">首页</a></li>
    <li class="layui-nav-item layui-this"><a href="javascript:;">快速交易</a></li>
    <li class="layui-nav-item"><a href="javascript:;">专业交易</a></li>
    <li class="layui-nav-item"><a href="javascript:;">C2C交易</a></li>
    <li class="layui-nav-item"><a href="javascript:;">个人中心</a></li>
  </ul>
  <div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
              <li class="layui-this">CNYT</li>
              <li>USDT</li>
              <li>自选</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-even="" lay-skin="nob">
                  <tbody>
                    <tr>
                      <td>SWTC</td>
                    </tr>
                    <tr>
                      <td>BTC</td>
                    </tr>
                    <tr>
                      <td>JCC</td>
                    </tr>
                    <tr>
                      <td>MOAC</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="layui-tab-item"></div>
              <div class="layui-tab-item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
		<div class="layui-col-md9 layui-col-space15">
			<div class="layui-col-md8">
	      <div class="layui-row layui-col-space10">
	        <div class="layui-col-md6">
	          <div class="layui-card" style="height: 140px">
	              <div class="layui-card-body">
	                  <p id="p_symbol" style="font-size: 30px; padding-top: 25px; padding-left: 10px;">SWTC/CNYT</p>
	                  <p id="p_price" style="font-size: 25px; padding-top: 25px; padding-left: 10px;">0.0057</p>
	              </div>
	          </div>
	        </div>
	        <div class="layui-col-md6">
	          <div class="layui-card">
	            <div class="layui-col-md4">
	              <div class="layui-card" style="height: 140px">
	                  <div class="layui-card-body">
	                      <p style="font-size: 18px; padding-top: 25px; padding-left: 10px;">最高价</p>
	                      <p id="p_price_high" style="font-size: 18px; padding-top: 25px; padding-left: 10px;">0.0062</p>
	                  </div>
	              </div>
	            </div>
	            <div class="layui-col-md4">
	              <div class="layui-card" style="height: 140px">
	                  <div class="layui-card-body">
	                      <p style="font-size: 18px; padding-top: 25px; padding-left: 10px;">最低价</p>
	                      <p id="p_price_low" style="font-size: 18px; padding-top: 25px; padding-left: 10px;">0.0057</p>
	                  </div>
	              </div>
	            </div>
	            <div class="layui-col-md4">
	              <div class="layui-card" style="height: 140px">
	                  <div class="layui-card-body">
	                      <p style="font-size: 18px; padding-top: 25px; padding-left: 10px;">24H量</p>
	                      <p id="p_amount_24h" style="font-size: 18px; padding-top: 25px; padding-left: 10px;">58880.69</p>
	                  </div>
	              </div>
	            </div>
	          </div>
	        </div>
	      </div>
	      <div class="layui-row layui-col-space10">
	        <div class="layui-col-md6">
	          <div class="layui-card">
	            <div class="layui-card-body">
	              <form class="layui-form" action="">
	                <div class="layui-form-item">
	                  <div class="layui-row">
	                    <div class="layui-col-md6">
	                      可用：888.88 (CNYT)<br>
	                      可买：--- (SWTC)
	                    </div>
	                    <div class="layui-col-md6">
	                      <button type="button" class="layui-btn layui-btn-xs layui-layout-right">充币</button>
	                    </div>
	                  </div>
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_price" lay-verify="txt_buy_price" autocomplete="off" placeholder="买入价" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_amount" lay-verify="txt_buy_amount" autocomplete="off" placeholder="买入量" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                  <div class="layui-btn-group">
	                    <button type="button" class="layui-btn layui-btn-primary">25%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">50%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">75%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">100%</button>
	                  </div>
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_amount" lay-verify="txt_buy_amount" autocomplete="off" placeholder="买入额" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                    <button type="button" class="layui-btn layui-btn-fluid">买入(BUY)</button>
	                </div>
	              </form>
	            </div>
	          </div>
	        </div>
	        <div class="layui-col-md6">

	          <div class="layui-card">
	            <div class="layui-card-body">
	              <form class="layui-form" action="">
	                <div class="layui-form-item">
	                  <div class="layui-row">
	                    <div class="layui-col-md6">
	                      可用：--- (SWTC)<br>
	                      可买：--- (CNYT)
	                    </div>
	                    <div class="layui-col-md6">
	                      <button type="button" class="layui-btn layui-btn-xs layui-layout-right">充币</button>
	                    </div>
	                  </div>
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_price" lay-verify="txt_buy_price" autocomplete="off" placeholder="卖出价" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_amount" lay-verify="txt_buy_amount" autocomplete="off" placeholder="卖出量" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                  <div class="layui-btn-group">
	                    <button type="button" class="layui-btn layui-btn-primary">25%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">50%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">75%</button>
	                    <button type="button" class="layui-btn layui-btn-primary">100%</button>
	                  </div>
	                </div>
	                <div class="layui-form-item">
	                    <input type="text" name="txt_buy_amount" lay-verify="txt_buy_amount" autocomplete="off" placeholder="卖出额" class="layui-input">
	                </div>
	                <div class="layui-form-item">
	                    <button type="button" class="layui-btn layui-btn-fluid">卖出(SELL)</button>
	                </div>
	              </form>
	            </div>
	          </div>

	        </div>
	      </div>
	    </div>
	    <div class="layui-col-md4">
				<div class="layui-card">
	        <div class="layui-card-body">
			      <table class="layui-table" lay-even="" lay-skin="row" lay-size="sm">
			        <thead>
			          <tr>
			            <th>价格(CNYT)</th>
			            <th>总量(SWTC)</th>
			            <th>总额(CNYT)</th>
			          </tr>
			        </thead>
			        <tbody>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			        </tbody>
			      </table>
					</div>
				</div>
				<div class="layui-card">
	        <div class="layui-card-body">
						<p style="font-size: 30px; padding-top: 0px; padding-left: 10px; align: center; text-align: center;">0.0065</p>
					</div>
				</div>
				<div class="layui-card">
	        <div class="layui-card-body">

			      <table class="layui-table" lay-even="" lay-skin="row" lay-size="sm">
			        <thead>
			          <tr>
			            <th>价格(CNYT)</th>
			            <th>总量(SWTC)</th>
			            <th>总额(CNYT)</th>
			          </tr>
			        </thead>
			        <tbody>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			          <tr>
			            <td>0.0065</td>
			            <td>10000</td>
			            <td>65.00</td>
			          </tr>
			        </tbody>
			      </table>
					</div>
				</div>
	    </div>
			<div class="layui-col-md12">
				<div class="layui-card">
	        <div class="layui-card-body">
	          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	            <ul class="layui-tab-title">
	              <li class="layui-this">当前委托</li>
	              <li>历史成交</li>
	            </ul>
	            <div class="layui-tab-content">
	              <div class="layui-tab-item layui-show">
	                <table class="layui-table" lay-even="" lay-skin="nob" lay-size="sm">
										<thead>
											<tr>
												<th>委托时间</th>
												<th>委托价格</th>
												<th>委托数量</th>
												<th>成交数量</th>
												<th>操作</th>
											</tr>
										</thead>
	                  <tbody>
	                  </tbody>
	                </table>
	              </div>
	              <div class="layui-tab-item">
									<table class="layui-table" lay-even="" lay-skin="nob" lay-size="sm">
										<thead>
											<tr>
												<th>委托时间</th>
												<th>委托价格</th>
												<th>委托数量</th>
												<th>成交数量</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
	            </div>
	          </div>
	        </div>
	      </div>
			</div>
		</div>
  </div>
</div>
	<script type="text/javascript" src="layui/layui.js"></script>
  <script>
    layui.config();
    layui.use('element', function(){
      var element = layui.element;
    });
  </script>
</body>
</html>
